
{block name="content"}
<div class="panel panel-default panel-intro">
    <style>
        .columns{
            display: none;
        }
    </style>
    {:build_heading()}

    <!-- 功能板块操作提示栏 -->
    <div class="panel-body steps-guide-collapsed" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; margin-bottom: 0;">
        <div class="row">
            <div class="col-md-12">
                <h4 style="margin-top: 0; color: white;"><i class="fa fa-info-circle"></i> 社区管理模块操作指引</h4>
                <div class="progress-steps">
                    <div class="step-container">
                        <div class="step completed" data-step="1">
                            <div class="step-number">1</div>
                            <div class="step-content">
                                <h5>社区办学机构</h5>
                                <p>在社区列表里，先新建或完善社区办学机构名称</p>
                                <div class="step-action">
                                    <button class="btn btn-xs btn-info" onclick="window.open('/community/community/index?ref=addtabs', '_blank')" style="margin-top: 8px;">
                                        <i class="fa fa-check"></i> 已完成
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="step completed" data-step="2">
                            <div class="step-number">2</div>
                            <div class="step-content">
                                <h5>项目课程预置</h5>
                                <p>在社区项目课程管理里，先新建或完善项目课程预置</p>
                                <div class="step-action">
                                    <button class="btn btn-xs btn-info" onclick="window.open('/community/project/setcourse?ref=addtabs', '_blank')" style="margin-top: 8px;">
                                        <i class="fa fa-check"></i> 已完成
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="step completed" data-step="3">
                            <div class="step-number">3</div>
                            <div class="step-content">
                                <h5>项目管理配置</h5>
                                <p>新建或管理项目，配置课程代码、社区代码、时区代码和时间关联配置</p>
                                <div class="step-action">
                                    <button class="btn btn-xs btn-info" onclick="window.open('/community/project/publicwelfare?ref=addtabs', '_blank')" style="margin-top: 8px;">
                                        <i class="fa fa-check"></i> 已完成
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="step active" data-step="4">
                            <div class="step-number">4</div>
                            <div class="step-content">
                                <h5>查看排课表格</h5>
                                <p>在公益课程短期里查看系统自动生成的排课表格，支持过期/未过期事件分组查看</p>
                                <div class="step-action">
                                    <button class="btn btn-xs btn-success" onclick="layer.msg('恭喜！您已完成所有步骤配置', {icon: 1})" style="margin-top: 8px;">
                                        <i class="fa fa-trophy"></i> 配置完成
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="current-step-info">
                    <span class="label label-success">当前步骤：第四步 - 查看排课表格（支持过期/未过期分组显示）</span>
                    <a href="javascript:;" class="btn btn-sm btn-info pull-right" id="toggleStepsBtn" onclick="toggleStepsGuide()">展开指引</a>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加样式 -->
    <style>
    .progress-steps {
        margin: 20px 0;
    }
    .step-container {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        position: relative;
    }
    .step {
        flex: 1;
        text-align: center;
        position: relative;
        padding: 0 10px;
    }
    .step:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 20px;
        right: -50%;
        width: 100%;
        height: 2px;
        background: rgba(255,255,255,0.3);
        z-index: 1;
    }
    .step.active .step-number {
        background: #28a745;
        color: white;
        box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
    }
    .step.completed .step-number {
        background: #17a2b8;
        color: white;
    }
    .step-number {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(255,255,255,0.3);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 10px;
        font-weight: bold;
        font-size: 16px;
        position: relative;
        z-index: 2;
        transition: all 0.3s ease;
    }
    .step-content h5 {
        color: white;
        margin-bottom: 5px;
        font-size: 14px;
    }
    .step-content p {
        color: rgba(255,255,255,0.9);
        font-size: 12px;
        margin: 0;
        line-height: 1.4;
    }
    .step-action {
        margin-top: 8px;
    }
    .step-action .btn {
        font-size: 11px;
        padding: 4px 8px;
        border-radius: 3px;
        transition: all 0.3s ease;
    }
    .step-action .btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    .current-step-info {
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid rgba(255,255,255,0.2);
    }
    .steps-guide-collapsed .progress-steps {
        display: none;
    }

    /* 城市和学校选择框样式 */
    #c-cityarea_id, #c-school_id {
        color: #90EE90 !important; /* 淡绿色文字 */
        background-color: #E0FFFF !important; /* 淡青色背景 */
        border: 1px solid #B0E0E6 !important; /* 淡蓝色边框 */
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.1) !important; /* 内陷效果 */
    }

    #c-cityarea_id:focus, #c-school_id:focus {
        color: #228B22 !important; /* 聚焦时深绿色文字 */
        background-color: #F0FFFF !important; /* 聚焦时更淡的青色背景 */
        border-color: #87CEEB !important; /* 聚焦时天蓝色边框 */
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.15), 0 0 5px rgba(135,206,235,0.3) !important;
    }
    
    /* 过期事件样式 */
    .expired-event {
        opacity: 0.7;
    }
    
    .expired-event td {
        color: #6c757d !important;
    }
    
    /* 禁用按钮样式 */
    .btn-disabled {
        opacity: 0.5;
        cursor: not-allowed !important;
        pointer-events: none;
    }
    
    .btn-secondary {
        background-color: #6c757d;
        border-color: #6c757d;
        color: #fff;
    }
    </style>

    <!-- 添加JavaScript -->
    <script>
    // 更新当前步骤
    function updateCurrentStep(stepNumber) {
        // 获取所有步骤
        const steps = document.querySelectorAll('.step');
        
        // 移除所有步骤的active类
        steps.forEach(step => {
            step.classList.remove('active');
            step.classList.remove('completed');
        });
        
        // 设置当前步骤为active
        const currentStep = document.querySelector(`.step[data-step="${stepNumber}"]`);
        if (currentStep) {
            currentStep.classList.add('active');
            
            // 将之前的所有步骤设置为completed
            const previousSteps = document.querySelectorAll(`.step[data-step]`);
            previousSteps.forEach(step => {
                const stepNum = parseInt(step.getAttribute('data-step'));
                if (stepNum < stepNumber) {
                    step.classList.add('completed');
                }
            });
        }
    }

    function toggleStepsGuide() {
        var panel = document.querySelector('.panel-body');
        var btn = document.getElementById('toggleStepsBtn');

        panel.classList.toggle('steps-guide-collapsed');

        // 更新按钮文字
        if (panel.classList.contains('steps-guide-collapsed')) {
            btn.textContent = '展开指引';
        } else {
            btn.textContent = '收起指引';
        }
    }

    // 页面加载时设置当前步骤（排课表格页面为第四步）
    document.addEventListener('DOMContentLoaded', function() {
        updateCurrentStep(4);
        
        // 等待项目列表数据加载完成后，自动选中第一个项目并触发选中事件
        setTimeout(function() {
            autoSelectFirstProject();
        }, 500);
    });
    
    // 自动选中第一个项目并触发选中事件
    function autoSelectFirstProject() {
        var projectList = document.querySelectorAll('.project-list li a');
        if (projectList.length > 1) {
            // 第一个是"全部项目"，选择第二个（第一个实际项目）
            var firstProject = projectList[1];
            if (firstProject) {
                // 模拟点击事件
                firstProject.click();
                
                // 更新按钮文本
                var dropdownToggle = document.querySelector('.dropdown-toggle');
                if (dropdownToggle) {
                    dropdownToggle.innerHTML = '<i class="fa fa-filter"></i> ' + firstProject.textContent + ' <span class="caret"></span>';
                }
                
                console.log('自动选中项目:', firstProject.textContent, 'ID:', firstProject.getAttribute('data-id'));
            }
        }
    }
    
    // 监听项目列表的变化，确保在动态加载后自动选中
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.type === 'childList' && mutation.target.classList.contains('project-list')) {
                // 项目列表发生变化时，延迟执行自动选中
                setTimeout(function() {
                    autoSelectFirstProject();
                }, 100);
            }
        });
    });
    
    // 开始观察项目列表的变化
    document.addEventListener('DOMContentLoaded', function() {
        var projectList = document.querySelector('.project-list');
        if (projectList) {
            observer.observe(projectList, {
                childList: true,
                subtree: true
            });
        }
    });
    </script>

    <div class="panel-body">
        <!-- 添加排课事件状态说明 -->
        <div class="alert alert-info" style="margin-bottom: 15px;">
            <i class="fa fa-info-circle"></i> 
            <strong>排课事件状态说明：</strong>
            系统会自动根据时间字段判断排课记录的过期状态。过期的排课记录将以红色边框标识，可以点击查看详情但无法修改。删除按钮对过期事件完全禁用。
        </div>
        
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    <div id="toolbar" class="toolbar">
                        <a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}" ><i class="fa fa-refresh"></i> </a>
                        <a href="javascript:;" class="btn btn-success btn-add {:$auth->check('course/schedule/add')?'':'hide'}" title="{:__('Add')}" ><i class="fa fa-plus"></i> {:__('Add')}</a>
                        <a href="javascript:;" class="btn btn-success btn-edit btn-disabled disabled {:$auth->check('course/schedule/edit')?'':'hide'}" title="{:__('Edit')}" ><i class="fa fa-pencil"></i> {:__('Edit')}</a>
                        <a href="javascript:;" class="btn btn-danger btn-del btn-disabled disabled {:$auth->check('course/schedule/del')?'':'hide'}" title="{:__('Delete')}" ><i class="fa fa-trash"></i> {:__('Delete')}</a>
                        <a href="javascript:;" class="btn btn-danger btn-import {:$auth->check('course/schedule/import')?'':'hide'}" title="{:__('Import')}" id="btn-import-file" data-url="ajax/upload" data-mimetype="csv,xls,xlsx" data-multiple="false"><i class="fa fa-upload"></i> {:__('Import')}</a>


                        <!-- 项目列表下拉框 -->
                        <div class="dropdown btn-group">
                            <button type="button" class="btn btn-primary dropdown-toggle" id="publicwelfareId" data-toggle="dropdown">
                                <i class="fa fa-filter"></i> 选择项目 <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu project-list" role="menu">
                                <li><a href="javascript:;" data-id="0">全部项目</a></li>
                                {foreach name="publicwelfareList" item="item"}
                                <li><a href="javascript:;" data-id="{$item.id}">{$item.project_name}</a></li>
                                {/foreach}
                            </ul>
                        </div>
                        
                        <!-- 清空项目排期按钮 -->
                        <a href="javascript:;" class="btn btn-danger btn-clear-schedule {:$auth->check('course/schedule/clear')?'':'hide'}" title="清空项目排期"><i class="fa fa-trash-o"></i> 清空项目排期</a>
                        <a href="javascript:;" class="btn btn-info btn-table-popup" title="排课表格"><i class="fa fa-table"></i> 社区排课表格</a>
                        <a href="javascript:;" class="btn btn-warning btn-generate-popup {:$auth->check('course/schedule/generate')?'':'hide'}" title="自动排课" style="display:none"><i class="fa fa-magic"></i> 自动排课</a>
                        <!-- 正式排课按钮 -->
                        <a href="javascript:;" class="btn btn-success btn-confirm-schedule" style="display:none"
                           data-action="confirm-schedule"
                           data-publicwelfare-id="0"
                           title="正式排课">
                            <i class="fa fa-check"></i> 正式排课
                        </a>

                        <!-- 取消正式排课按钮 -->
                        <a href="javascript:;" class="btn btn-warning btn-cancel-schedule"
                           data-action="cancel-schedule"
                           data-publicwelfare-id="0"
                           title="取消正式排课">
                            <i class="fa fa-times"></i> 取消正式排课
                        </a>
                        <div class="row cityschool">
                            <div class="col-md-3">
                                <select id="c-cityarea_id" name="city_id" class="form-control select"
                                        data-live-search="true" title="选择城市">
                                    <option value="">全部城市</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <select id="c-school_id" name="school_id" class="form-control select"
                                        data-live-search="true" title="选择学校">
                                    <option value="">全部学校</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <button type="button" class="btn btn-info btn-filter" id="btn-filter">
                                    <i class="fa fa-search"></i> 筛选
                                </button>
                            </div>
                        </div>
                    </div>
                    <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
                           data-pagination="true"
                           data-page-size="30"
                           data-page-list="[10, 20,30, 50, 100]" width="100%"></table>
                </div>
            </div>
        </div>
    </div>
</div>



{/block}
